import settingLess from "./setting.module.less";
import { LeftOutlined } from "@ant-design/icons";
import LeftTab from "@/components/leftTab";
import { GetSettingTabsApi } from "@/http/api/setting";
import { useState, useEffect } from "react";
import { useNavigate, useLocation, Outlet } from "react-router-dom";
function Setting() {
  const navigate = useNavigate();
  const location = useLocation();
  const [tabList, setTabList] = useState([]);
  const GetTabList = async () => {
    const res: any = await GetSettingTabsApi();
    console.log("获取到设置tab", res);
    setTabList(res.tabList);
  };
  const [menu, setMenu] = useState("");
  useEffect(() => {
    GetTabList();
    const paths = location.pathname.split("/").filter(Boolean); // 分割路径并去掉空项
    const lastPath = paths[paths.length - 1]; // 获取最后一个路径部分
    setMenu(lastPath);
  }, []);

  const childrenSelectMenu = (item: any) => {
    navigate("/setting/" + item.Path);
  };
  return (
    <div className={settingLess.settingContent}>
      <div className="backMyHome">
        <div className="leftIcon">
          <LeftOutlined />
        </div>
        <div className="name">返回个人主页</div>
      </div>
      <div className="bottomContent">
        <div className="leftNavMenu">
          <LeftTab
            tabList={tabList}
            menu={menu}
            childrenSelectMenu={childrenSelectMenu}
          />
        </div>
        <div className="rightMenuContent">
          <Outlet />
        </div>
      </div>
    </div>
  );
}

export default Setting;
